<template>
  <div class="container">
    <div class="opt-area-02">
      <div class="input-frame" style="width: 100%;text-alone:left;margin-bottom:10px;font-size: 14px">
        &nbsp;&nbsp;&nbsp;&nbsp;总人数: <span>{{params.totalRecord}}</span>
        </div>
        <div class="left-con" style="margin-bottom: 10px">
          <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
            <Select placeholder="请选择区" :disabled="Adisabled" v-model="params.area_id" style="width:164px" @on-change="findDistrictList(3,params.area_id)">
              <Option v-for="item in List1" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
            <Select placeholder="请选择街道" :disabled="Bdisabled" v-model="params.street_id" style="width:164px" @on-change="findDistrictList(4,params.street_id)">
              <Option v-for="item in List2" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px" v-if="severUserInfo.company_grade!=='5'">
            <Select placeholder="请选择社区" v-model="params.community_id" style="width:164px">
              <Option v-for="item in List3" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
      </div>
        <div class="left-con">
          <div class="input-frame" style="width: 164px">
            <Input type="text" @on-click="selectlist(1)" placeholder="请输入姓名" style="width: 164px" v-model="params.XM" icon="ios-search"/>
          </div>
          <div class="input-frame" style="width: 164px">
            <Input type="text" @on-click="selectlist(1)" placeholder="请输入身份证号" style="width: 164px" v-model="params.ZJHM" icon="ios-search"/>
          </div>
<!--          <div class="input-frame" style="width: 164px">-->
<!--            <Select v-model="params.SFZHT" placeholder="是否入户装户图" filterable>-->
<!--              <Option value="">全部</Option>-->
<!--              <Option value="1">是</Option>-->
<!--              <Option value="0">否</Option>-->
<!--            </Select>-->
<!--          </div>-->
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.is_handle" placeholder="是否处置" filterable>
              <Option value="">全部</Option>
              <Option value="1">已处置</Option>
              <Option value="0">未处置</Option>
            </Select>
          </div>
          <div class="input-frame" style="width: 164px">
            <Select v-model="params.hspc_table_name" placeholder="核酸轮次" filterable>
              <Option v-for="obj in dicList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
            </Select>
          </div>
          <Button type="info" @click="selectlist(1)" style="margin-top: 0px;margin-right:10px">搜索</Button>
        </div>
      </div>
      <Table :loading="countData.loading" border :columns="columns" :data="dataList" size="small" ref="table">
        <template slot-scope="{ row }" slot="SFSST">
          <img  v-show="row.SFSST === '0'" :src="falseIocn" style="width: auto; height: auto" alt="..." class="head-img">
          <img  v-show="row.SFSST === '1'" :src="trueIocn" style="width: auto; height: auto" alt="..." class="head-img">
        </template>
        <template slot-scope="{ row }" slot="SFHS">
          <img  v-show="row.SFHS === '0'" :src="falseIocn" style="width: auto; height: auto" alt="..." class="head-img">
          <img  v-show="row.SFHS === '1'" :src="trueIocn" style="width: auto; height: auto" alt="..." class="head-img">
        </template>
        <template slot-scope="{ row }" slot="SFZHT">
          <img  v-show="row.SFZHT === '0'" :src="falseIocn" style="width: auto; height: auto" alt="..." class="head-img">
          <img  v-show="row.SFZHT === '1'" :src="trueIocn" style="width: auto; height: auto" alt="..." class="head-img">
        </template>
        <template slot-scope="{ row }" slot="is_handle">
          <span  v-show="row.is_handle === '0' || row.is_handle === '' || row.is_handle === undefined" > 未处置 </span>
          <span  v-show="row.is_handle === '1'" > 已处置 </span>
        </template>
        <template slot="action" slot-scope="{ row }">
          <Row style="margin-bottom: 5px; margin-top: 2px">
            <Button v-show="(row.is_handle === '0' || row.is_handle === '' || row.is_handle === undefined) && severUserInfo.company_grade ==='5'" class="table-action-btn" style="margin-right: 5px" type="info" size="small" @click="openChuzhi(row)">处置</Button>
            <Button v-show="row.is_handle === '1'" class="table-action-btn" style="margin-right: 5px" type="info" size="small" @click="getChuzhi(row)">查看处置</Button>
<!--            <Button class="table-action-btn" v-if="row.SFZHT == 0 || row.SFZHT == '0'" style="margin-right: 5px" type="success" size="small" @click="addPerson(row)">入户</Button>-->
          </Row>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page_style">
        <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
              @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
      </Row>
    <Modal width="400" v-model="chuzhi.isshow" title="添加处置信息">
      <Form :model="chuzhi.info" label-position="top">
        <FormItem>
          <template slot="label">
            <span class="red-star">*</span>处置类型：
          </template>
          <Select placeholder="请选择处置类型" v-model="chuzhi.info.handle_type">
            <Option value="6">离沈</Option>
            <Option value="1">使用他人健康码</Option>
            <Option value="2">其他机构检测</Option>
            <Option value="4">未检测</Option>
            <Option value="5">失联</Option>
            <Option value="7">参与本轮全员但未显示</Option>
            <Option value="3">其他情况</Option>
          </Select>
        </FormItem>
        <FormItem v-if="chuzhi.info.handle_type === '3'">
          <template slot="label">
            <span class="red-star">*</span>是否应检：
          </template>
          <RadioGroup v-model="chuzhi.info.is_should_test" type="button">
            <Radio label="1">应检</Radio>
            <Radio label="0">不应检</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>
          <template slot="label">
            <span class="red-star">*</span>处置内容：
          </template><Input maxlength="100" show-word-limit type="textarea"  placeholder="请注明处置内容" v-model="chuzhi.info.handle_content"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="success" @click="addchuzhiinfo">保存</Button>
        <Button type="error" @click="chuzhi.isshow=false">关闭</Button>
      </div>
    </Modal>
    <Modal
        v-model="initModal.isshow"
        title="提示"
        >
        <h2>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{initModal.info}}
        </h2>
        <div slot="footer">
            <Button type="primary" :disabled="!disabledCodeBtn" @click="initModal.isshow = false">{{time}}确认</Button>
        </div>
    </Modal>
    <person-info-modal :user-info="userInfo" :control-data="controlData" :severUserInfo="severUserInfo" ref="photo"></person-info-modal>
  </div>
</template>

<script>

import {
  // addUser,
  findHspcList, updateHandle, findLabelList } from '@/api/grid'
// import { findGardenList } from '@/api/eventlist'
import PersonInfoModal from '@/view/xian-page/mainv3/components/personInfoModal'
import trueIocn from '@/assets/images/true-iocn.png'
import falseIocn from '@/assets/images/false-iocn.png'
import { findSubordinateList } from '../../../api/eventlist'

export default {
  name: 'index',
  components: {
    PersonInfoModal
  },
  data () {
    return {
      dataList: [],
      trueIocn,
      falseIocn,
      disabledCodeBtn: false,
      columns: [
        { title: '区', key: 'qx_name', align: 'center' },
        { title: '街道', key: 'jd_name', align: 'center' },
        { title: '社区', key: 'SSSQMC', align: 'center' },
        { title: '姓名', key: 'XM', align: 'center' },
        { title: '身份证号', key: 'ZJHM_mi', align: 'center' },
        { title: '联系方式', key: 'SJH', align: 'center' },
        // { title: '是否注册盛世通', slot: 'SFSST', align: 'center' },
        { title: '是否核酸', slot: 'SFHS', align: 'center' },
        // { title: '是否入户装户图', slot: 'SFZHT', align: 'center' },
        { title: '是否处置', slot: 'is_handle', align: 'center' },
        // { title: '核酸检测轮次', key: 'hspc_table_name', align: 'center' },
        { title: '操作', align: 'center', width: 160, slot: 'action', fixed: 'right' }
      ],
      dicList: [],
      countData: {
        loading: false
      },
      initModal: {
        isshow: false,
        info: '  以上疑似本轮核酸检测漏检人员信息，系由大数据分析比对产生，仅供线下核实工作者参考使用，并以实际摸排结果为准。相关数据信息涉及公民隐私，注意保密管理！'
      },
      time: '',
      severUserInfo: {},
      userInfo: {},
      userOverall: {},
      controlData: {
        show1: false,
        uploadHeader: false,
        readType: 1, // 读取当前人员信息的方式 0未读取 1输入卡号 2读身份证 3人脸对比
        cardnoInput: '',
        showDetail: false,
        photo: '',
        personTags: []
      },
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        XM: '',
        ZJHM: '',
        SFHS: '',
        SFSST: '',
        SFZHT: '',
        hspc_table_name: '0',
        area_id: '',
        street_id: '',
        community_id: ''
      },
      chuzhi: {
        isshow: false,
        info: {}
      },
      ruhu: {
        isshow: false,
        info: {}
      },
      GridGradenList: [],
      nucleic_name: '',
      Adisabled: false,
      Bdisabled: false,
      List1: [],
      List2: [],
      List3: []
    }
  },
  watch: {
    // 'params.hspc_table_name' (val) {
    //   this.dicList.forEach(item => {
    //     if (item.value === val) {
    //       this.nucleic_name = item.label
    //       console.log(this.nucleic_name, '2342342342343243')
    //     }
    //   })
    // }
    'severUserInfo.company_grade' (val) {
      if (val === '2') {
        this.findDistrictList(2, '999999999')
      } else if (val === '3') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.company_id
        this.findDistrictList(3, this.params.area_id)
        this.Adisabled = true
      } else if (val === '4') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.parent_id
        this.findDistrictList(3, this.params.area_id)
        this.params.street_id = this.severUserInfo.company_id
        this.findDistrictList(4, this.params.street_id)
        this.Adisabled = true
        this.Bdisabled = true
      }
    }
  },
  methods: {
    init () {
      findHspcList(this.params).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          if (this.severUserInfo.company_grade === '5') {
            this.columns = [
              { title: '姓名', key: 'XM', align: 'center' },
              { title: '身份证号', key: 'ZJHM_mi', align: 'center' },
              { title: '联系方式', key: 'SJH', align: 'center' },
              { title: '是否核酸', slot: 'SFHS', align: 'center' },
              { title: '是否处置', slot: 'is_handle', align: 'center' },
              { title: '操作', align: 'center', width: 160, slot: 'action', fixed: 'right' }
            ]
          }
          this.dataList = ret.data.data.results
          this.countData.loading = false
          this.params.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '查询列表信息失败', desc: ret.data.errmsg })
        }
      })
    },
    selectlist (e) {
      this.params.pageNo = e
      this.init()
    },
    countDown (time) {
      this.time = time + 's'
      if (time === 0) {
        this.disabledCodeBtn = true
        this.time = ''
        return
      } else {
        this.disabledCodeBtn = false
        time--
      }
      setTimeout(() => {
        this.countDown(time)
      }, 1000)
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    getDicInfo () {
      findLabelList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dicList = ret.data.data
          this.params.hspc_table_name = this.dicList[this.dicList.length - 1].value
          this.init()
        } else {
          this.$Notice.error({ title: '查询核酸检测轮次失败', desc: ret.data.errmsg })
        }
      })
    },
    addchuzhiinfo () {
      if (!this.chuzhi.info.hspc_table_name) {
        this.$Notice.error({ title: '请选择轮次' })
        return
      }
      if (!this.chuzhi.info.handle_type) {
        this.$Notice.error({ title: '请选择处置类型' })
        return
      }
      if (this.chuzhi.info.handle_type === '3' && !this.chuzhi.info.is_should_test) {
        this.$Notice.error({ title: '请选择是否应检' })
        return
      }
      if (!this.chuzhi.info.handle_content) {
        this.$Notice.error({ title: '请填写处置内容' })
        return
      }
      if (this.chuzhi.info.handle_type !== '3') {
        this.chuzhi.info.is_should_test = ''
      }
      updateHandle(this.chuzhi.info).then(ret => {
        if (ret.data.errcode === 0) {
          this.chuzhi = {
            isshow: false,
            info: {}
          }
          this.$Notice.success({ title: '处置成功' })
          this.init()
        } else {
          this.$Notice.error({ title: '处置失败', desc: ret.data.errmsg })
        }
      })
    },
    getChuzhi (e) {
      this.chuzhi.info = {
        ID: e.ID,
        hspc_table_name: this.params.hspc_table_name,
        handle_type: e.handle_type,
        handle_content: e.handle_content
      }
      this.chuzhi.isshow = true
    },
    openChuzhi (row) {
      this.chuzhi.info = {
        ID: row.ID,
        hspc_table_name: this.params.hspc_table_name,
        handle_type: '',
        handle_content: ''
      }
      this.chuzhi.isshow = true
    },
    findDistrictList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === 2) {
            this.List1 = ret.data.data
          } else if (e1 === 3) {
            this.List2 = ret.data.data
          } else if (e1 === 4) {
            this.List3 = ret.data.data
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
    // findGridGradenList () {
    //   findGardenList().then(ret => {
    //     if (ret.data.errcode === 0) {
    //       this.GridGradenList = ret.data.data
    //     } else {
    //       this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
    //     }
    //   })
    // },
    // addPerson (row) { // 添加人员
    //   this.userInfo = {}
    //   this.getGridUserInfo(row.ZJHM)
    //   this.findGridGradenList()
    // },
    // getGridUserInfo (cardno) {
    //   console.log('身份证号码', cardno)
    //   this.controlData.cardno = cardno
    //   this.userOverall.cardno = cardno
    //   addUser({ cardno: cardno }).then(res => {
    //     this.controlData.showDetail = true
    //     if (res.data.errcode === 0) {
    //       if (res.data.data === null) {
    //         this.userInfo = { cardno: cardno }
    //         this.userInfo.card_type = 1
    //         this.controlData.personTags = []
    //         this.controlData.idsArr = []
    //       } else {
    //         this.controlData.showDetail = true
    //         this.userInfo = res.data.data
    //         if (this.userInfo.photo === undefined) {
    //           this.userInfo.photo = ''
    //         }
    //         if (this.userInfo.focus_group) {
    //           this.controlData.personTags = this.userInfo.focus_group.split(',')
    //         } else {
    //           this.controlData.personTags = []
    //         }
    //         // 不论是否上传头像，查询个人信息时包含头像则不上传
    //         if (this.userInfo.photo) {
    //           this.controlData.photo = this.userInfo.photo
    //           this.controlData.uploadHeader = false
    //         } else {
    //           this.controlData.photo = this.controlData.photo || this.nophoto
    //         }
    //         if (this.controlData.readType !== 2) {
    //           this.userOverall.name = this.userInfo.name
    //           this.userOverall.address = this.userInfo.address
    //           this.userOverall.sex = this.userInfo.sex
    //           this.userOverall.folk = this.userInfo.folk
    //         }
    //         this.userOverall.readCount++
    //         this.userOverall.id = this.userInfo.id
    //         this.userOverall.userInfo = this.userInfo
    //       }
    //     } else {
    //       this.$Notice.error({ title: '查询失败！', desc: res.data.errmsg })
    //       this.controlData.showDetail = false
    //     }
    //   })
    // },
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.getDicInfo()
    this.countDown(3)
    this.initModal.isshow = true
  }
}
</script>

<style scoped>
.container {
  padding: 12px;
}
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: gray;
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}

.btn-action {
  margin-bottom: 10px;
}

.mp10 {
  margin-right: 10px;
}
.title-style {
  color: red;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.red-star {
    font-family: SimSun;
    color: #f00;
    margin-right: 4px;
  }
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
</style>
